<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="LAY-list-form">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label  layui-label-jy">采购计划单号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="code" placeholder="请输入采购计划单号" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">SKU</label>
                    <div class="layui-input-block">
                        <input type="text" name="sku" placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <button style="display:none" class="down" lay-submit="" lay-filter="LAY-list-down">下载</button>
                    <button type="reset" class="layui-btn layui-btn-primary reset" id="reset">重置</button>
                    <button class="layui-btn layuiadmin-btn-useradmin search" lay-submit lay-filter="LAY-list-search">搜索</button>
                </div>
            </div>
        </div>

        <div class="layui-card-body">
            <table id="LAY-list"  lay-filter="LAY-list"></table>
            <!-- 头部工具栏 -->
            <script type="text/html" id="toolbar">
                <div class="layui-btn-group fl layui-btn-group-jy">
                    <a lay-event="export" href="javascript:;" class="layui-btn layui-btn-primary layui-btn-sm layui-icon layui-icon-download-circle">&nbsp;导出</a>
                </div>
            </script>
            <!-- 行内工具 -->
            <script type="text/html" id="LAY-list-toolbar">
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="disable" class="fyMess">弹出框</a>
            </script>

        </div>
    </div>
</div>

<script>
    layui.use(['admin', 'table', 'form','toolJ','upload'], function () {
        var $ = layui.$
            , admin = layui.admin
            , view = layui.view
            , table = layui.table
            , toolJ = layui.toolJ
            , form = layui.form;
        form.render(null, 'LAY-list-form');
         table.render({
                elem: '#LAY-list'
               ,url: '/index/Purchaseplanfollow/getList'
                ,toolbar: '#toolbar'
                ,cellMinWidth:100
                ,defaultToolbar: ['filter']
                ,cols: [[
                    {type:'checkbox'}
                   ,{field: 'purchase_plan_sn', title: '采购计划单号'}
                    ,{field: 'shop_sale_plan_sn', title: '店铺销售计划单号'}
                    ,{field: 'sku', title: 'SKU'}
                    ,{field: 'sku_name', title: '中文名称'}
                    ,{field: 'need_quantity', title: '理论需求量'}
                    ,{field: 'quantity', title: '实际计划量'}
                    ,{field: 'pr', title: 'PR单号'}
                    ,{field: 'po', title: 'PO单号'}
                    ,{field: 'po_quantity', title: 'po数量'}
                    ,{field: 'purchaseorder_date', title: 'po生成时间'}
                    ,{field: 'warehouse', title: '仓库'}
                    ,{field: 'warequantity', title: '入库数量'}
                    ,{field: 'waredate', title: '入库时间'}
                    ,{field: 'remind_quantity', title: '结余数量'}
                    ,{field: 'out_quantity', title: '出库数量',templet:function(d){
                        if(d.warequantity<=0){
                             return  d.out_quantity;
                        }else{
                             return '<span style="color: blue;font-size:20px;" class="fyalert" data-sku="'+d.sku+'" data-warequantity="'+d.warequantity+'">'+ d.out_quantity +'</span>';
                        }
                       
                      }}
                ]]
                ,page: true
                ,limit: 30
                ,text:{none: '暂无相关数据!' }
        }); 
         //监听头部工具栏 操作
        table.on('toolbar(LAY-list)', function (obj) {
		
            //选中的数据
            var checkStatus = table.checkStatus('LAY-list')
                , data = checkStatus.data;
            //event对应模板的
            switch (obj.event) {
                case 'export':
                    $('.down').click();
                    break;

            }
        });
        $('body').on("click",'.fyalert',function(){
            sku=$(this).data("sku");
            warequantity=$(this).data("warequantity");
           admin.popup({
                title: '详情'
                ,area: ['700px','500px']
                ,id: 'LAY-popup-content-message'
                ,success: function(layero, index){
                   view(this.id).render('Purchaseplanfollow/getDelivery').done(function(){
                       table.render({
                            elem: '#LAY-list_detail'
                           ,url: '/index/Purchaseplanfollow/getDelivery?sku='+sku+'&wareQuantity='+warequantity+"'"
                            ,cellMinWidth:100
                            ,cols: [[
                               {field: 'code', title: '发运计划单号'}
                                ,{field: 'local_order_no', title: '物流内单号'}
                                ,{field: 'quantity', title: '出库数量'}
                                ,{field: 'date', title: '出库时间'}
                                ,{field: 'user', title: '计划员'}
                            ]]
                            ,page: false
                            ,limit: 1000
                            ,text:{none: '暂无相关数据!' }
                    }); 
                       
                       
                       
                   });
                }
              });
        });
    });
</script>